<script setup lang="ts">
async function particlesLoaded(container: any) {
  console.log('粒子背景加载完成', container)
}

// 粒子配置（你已有的）
const options = {
  background: {
    color: {
      value: '#0d47a1',
    },
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push',
      },
      onHover: {
        enable: true,
        mode: 'repulse',
      },
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      push: {
        quantity: 6,
      },
      repulse: {
        distance: 200,
        duration: 0.4,
      },
    },
  },
  particles: {
    color: {
      value: '#ffffff',
    },
    links: {
      color: '#ffffff',
      distance: 100,
      enable: true,
      opacity: 0.6,
      width: 1,
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: 'bounce',
      random: false,
      speed: 3,
      straight: false,
    },
    number: {
      density: {
        enable: true,
      },
      value: 300,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: 'circle',
    },
    size: {
      value: { min: 1, max: 5 },
    },
  },
  detectRetina: true,
}
</script>

<template>
  <vue-particles
    id="tsparticles"
    class="particle-bg"
    :options="options"
    @particles-loaded="particlesLoaded"
  />
</template>

<style scoped>
.particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 让粒子在最底层 */
  pointer-events: none; /* 防止遮挡交互 */
}
</style>
